<!DOCTYPE html>
<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>Notebook | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${base}/rs/css/bootstrap.4.0.css" type="text/css" />
  <link rel="stylesheet" href="${base}/rs/css/app.v2.css" type="text/css" />

  <link href="${base}/rs/plugins/jquery-treegrid-master/css/jquery.treegrid.css" rel="stylesheet" />

</head>

<body>
<section class="panel panel-default">
  <header class="panel-heading bg-light">
    <ul class="nav nav-tabs nav-justified">
      <li class="active" style="width:200px;" data-menutype="1"><a href="javaScript:void(0);" >微信端导航</a></li>
      <li style="width:200px;" data-menutype="2"><a href="javaScript:void(0);">PC端导航</a></li>
    </ul>
  </header>

  <input type="hidden" id="type" name="type" value="1"  />
  <div class="panel-body">
    <div class="tab-content">
      <div class="tab-pane active" >
        <section class="scrollable padder">
          <div class="m-b-md">
            <h3 class="m-b-none"></h3>
          </div>
          <section class="panel panel-default " >
            <header class="panel-heading font-bold">查询条件</header>
            <div class="panel-body col-lg-12">
              <form class="form-inline col-lg-12" role="form">
                <label class="control-label" for="wxMenuName" STYLE="line-height: 34px;">菜单名称</label>
                <div class="control-label m-l">
                  <input type="text" class="form-control"  id="wxMenuName" placeholder="请输入菜单名称">
                </div>
                <button type="button" class="btn btn-default m-l-lg SelectEntity" >搜索</button>
                <a href="javaScript:void(0);" class="btn btn-success m-l AddEntity" data-toggle="modal">添加</a>
              </form>
            </div>
          </section>
          <table class="table table-striped b-t b-light text-sm table-hover msgmenuclass" >
          </table>
        </section>

      </div>

      <div class="tab-pane" >
        <section class="scrollable padder">
          <div class="m-b-md">
            <h3 class="m-b-none"></h3>
          </div>
          <section class="panel panel-default" >
            <header class="panel-heading font-bold">查询条件</header>
            <div class="panel-body col-lg-12">
              <form class="form-inline col-lg-12" role="form">
                <label class="control-label" for="pcMenuName" STYLE="line-height: 34px;">菜单名称</label>
                <div class="control-label m-l">
                  <input type="text" class="form-control"  id="pcMenuName" placeholder="请输入菜单名称">
                </div>
                <button type="button"  class="btn btn-default m-l-lg SelectEntity" >搜索</button>
                <a href="javaScript:void(0);" class="btn btn-success m-l AddEntity" data-toggle="modal">添加</a>
              </form>
            </div>
          </section>
          <table class="table table-striped b-t b-light text-sm table-hover msgmenuclass" >
          </table>
        </section>
      </div>

    </div>

  </div>
</section>
<script src="${base}/rs/jquery/jquery-1.12.4.min.js"></script>
<script src="${base}/rs/js/layer/layer.js"></script>
<script src="${base}/rs/js/layer/commont.js"></script>
<script src="${base}/rs/bootstrap/js/bootstrap.min.js"></script>

<script src="${base}/rs/plugins/jquery-treegrid-master/js/jquery.treegrid.min.js"></script>
<script src="${base}/rs/plugins/jquery-treegrid-master/js/jquery.treegrid.bootstrap3.js"></script>
<script src="${base}/rs/plugins/jquery-treegrid-master/extension/jquery.trregrid.extension.js"></script>

<script>
    /** 切换导航 */
    $('.nav-tabs>li').click(function(){
        var index=$(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('.tab-pane').eq(index).addClass('active').siblings().removeClass('active');

        var menuType=$(this).attr("data-menutype");
        $("#type").val(menuType);

        var type=$("#type").val();
        var name;
        var pcMenuName=$("#pcMenuName").val();
        var wxMenuName=$("#wxMenuName").val();
        var menuType=$("#type").val();
        if (type==1){
            name=wxMenuName;
        }else{
            name=pcMenuName;
        }
        var $table = $('.msgmenuclass');
        $table.bootstrapTable("refresh",{query:{name: name,menuType:menuType}});
    })
</script>

<script>
    var $table = $('.msgmenuclass');
    $(document).ready(function () {
        $table.treegridData({
            id: 'Id',
            parentColumn: 'ParentId',
            type: "get", //请求数据的ajax类型
            url: '/msgMenu/JsonList?menuType=' + $("#type").val(),   //请求数据的ajax的url
            ajaxParams: {}, //请求数据的ajax的data属性
            expandColumn: null,//在哪一列上面显示展开按钮
            striped: true,   //是否各行渐变色
            bordered: true,  //是否显示边框
            expandAll: false,  //是否全部展开
            columns: [
                {
                    title: '菜单名称',
                    field: 'name'
                },
                {
                    title: '创建时间',
                    field: 'createTime'
                }
            ]
        });
    });
</script>

<script type="text/javascript">
    (function(){
        var $table = $('.msgmenuclass');
        var actionEvents = {
            'click .edit': function (e, value, row, index) {
                layer.open({
                    type: 2,
                    title: '菜单修改',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['430px', '280px'], //宽高
                    content: ['${base}/msgMenu/SelectEntity?menuId='+row.menuId+'&type='+$("#type").val(), 'yes'],
                    yes:function (index,layero){
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            },
            'click .add': function (e, value, row, index) {
                var title=numberConvertToUppercase(row.grade+1)+"级菜单添加";
                layer.open({
                    type: 2,
                    title: title,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['430px', '280px'], //宽高
                    content: ['${base}/msgMenu/SelectEntity?menuParentId='+row.menuId+'&type='+$("#type").val(), 'yes'],
                    yes:function (index,layero){
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            },
            'click .remove': function (e, value, row, index) {
                layer.confirm("是否删除菜单及其子菜单？",{icon:4}, function(){
                    deleteMsgMenu(row.menuId);
                });
            }
        };
        $(function(){
            /**增加*/
            $(".AddEntity").click(function () {
                layer.open({
                    type: 2,
                    title: '一级菜单添加',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['430px', '280px'], //宽高
                    content: ['${base}/msgMenu/SelectEntity?type='+$("#type").val(), 'yes'],
                    yes:function (index,layero){
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            })
            /** 查询 */
            $(".SelectEntity").on("click", function(e){
                var name;
                var pcMenuName=$("#pcMenuName").val();
                var wxMenuName=$("#wxMenuName").val();
                var type=$("#type").val();
                if (type==1){
                    name=wxMenuName;
                }else{
                    name=pcMenuName;
                }
                $table.bootstrapTable("refresh",{query:{name: name,menuType:type}});
            });


        });
        /** 初始化表格数据 */

      /*封装查询参数*/
        function queryParams(params) {
            var name;
            var pcMenuName=$("#pcMenuName").val();
            var wxMenuName=$("#wxMenuName").val();
            var type=$("#type").val();
            if (type==1){
                name=wxMenuName;
            }else{
                name=pcMenuName;
            }
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageSize: params.limit,   //页面大小
                pageNum: params.offset,  //页码
                name:name,
                menuType:type
            };
            return temp;
        }
        /**
         *  table最后一列的操作
         */
        function actionFormatter(value, row, index) {
            var v="";
            if(row.grade<3){
                v='<a href="javaScript:void(0);" class="add" data-toggle="class">添加</a>';
            }else{
                v='<a href="javaScript:void(0);" style=" color: #6f6f6f;cursor: default;" data-toggle="class">添加</a>';
            }
            return [
                '<a href="javaScript:void(0);" class="edit"  data-toggle="class">修改</a> ' +
                '&nbsp;&nbsp;' +v+
                '&nbsp;&nbsp;' +
                '<a href="javaScript:void(0);" class="remove" data-toggle="class">删除</a>'
            ].join('');
        }

        /**
         * 删除
         * @param value
         */
        function deleteMsgMenu(value) {
            $.ajax({
                type: "delete",
                url: "/msgMenu/DeleteEntity?ids="+value,
                success: function(result){
                    if(1==result.returnInfo.state){
                        showLayerAlert("删除成功！");
                    }else{
                        showLayerAlert(result.returnInfo.errorMsg);
                    }
                },
                error: function(result){
                    $table.bootstrapTable("refresh");
                    layer.msg(result.state, {icon: 6,time: 3*1000});
                }
            });
        }

        //- 小写数字转换成大写, 只处理到[0 ~ 99]
        function numberConvertToUppercase(num) {
            num = Number(num);
            var upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千', '万', '亿'];
            var length = String(num).length;
            if (length == 1) {
                return upperCaseNumber[num];
            } else if (length == 2) {
                if (num == 10) {
                    return upperCaseNumber[num];
                } else if (num > 10 && num < 20) {
                    return '十' + upperCaseNumber[String(num).charAt(1)];
                } else {
                    return upperCaseNumber[String(num).charAt(0)] + '十' + upperCaseNumber[String(num).charAt(1)].replace('零', '');
                }
            }
        }
    })(jQuery);

</script>
</body>
</html>

